<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户中心</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/vue/vue.min.js"></script>
<script src="js/jquery/jquery.min.js"></script>
<script src="js/laypage/laypage.js" charset="utf-8"></script>
<script src="js/layer/layer.js" charset="utf-8"></script>
</head>
<body>
	<!-- container容器集装箱的意思 -->
	<div id="app" class="container">
		<form class="form-inline bg-danger" role="form">
		  查询条件：
		  <div class="form-group">
		    <label class="sr-only" for="username">用户名称</label>
		    <input type="text" class="form-control" id="username" placeholder="用户名称">
		  </div>
		  <!-- <div class="form-group">
		    <label class="sr-only" for="userage">用户年龄</label>
		    <input type="text" class="form-control" id="userage" placeholder="用户年龄">
		  </div> -->
		  <button type="button" id="findUser" class="btn btn-success">查询用户</button>
		  <button type="button" id="addUserBtn" class="btn btn-danger">增加用户</button>
		</form>
		<div class="table-respnsive">
			<table class="table">
				<thead>
					<tr class="success">
						<td>序号</td>
						<td>用户名称</td>
						<td>用户密码</td>
						<td>用户性别</td>
						<td>联系方式</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr class="active" v-for="(item,index) in result">
						<td>{{index+1}}</td>
						<td>{{item.name}}</td>
						<td>{{item.password}}</td>
						<td>{{item.sex}}</td>
						<td>{{item.phone}}</td>
						<td><a href="#" @click="editEvent(item.id)">编辑</a> <a
							href="#" @click="delEvent(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
			<div id="pagenav"></div>
		</div>
	</div>
	<script>
	var app = new Vue({
		el : '#app',
		data : {
			result:[]
		}
	});
	//查询用户数据
	var getUserPageList = function(curr){
		$.ajax({
			type:"GET",
			datdaType:"json",
			url:"/user/getcond",
			data:{
				pageNum:curr || 1,
				pageSize:8,
				name:$("#username").val()
				//向服务端穿的参数，此处只是演示
			},
			success:function(msg){
				app.result = msg.result;
				laypage({
					cont:'pagenav',//容器。值支持id名、原生dom对象，jquery对象
					pages:msg.totalPage,//总页数
					first:true,
					last:true,
					curr:curr||1,//当前页
					jump:function(obj,first){//触发分页后的回调
						if(!first){//点击跳页触发函数自身，并传递当前页：obj.curr
							getUserPageList(obj.curr)	
						}
						
					}
				});
			}	
		});
	}
	getUserPageList();
	//查询用户事件
	$('#findUser').on('click',function(){
		getUserPageList();
	})
	
	//增加用户事件
	$('#addUserBtn').click(function(){
		layer.open({
			type:2,
			title:'添加用户',
			fix:false,
			maxmin:true,
			shadeClose:true,
			area:['1100px','600px'],
			content:'user_add.html',
			end:function(){
				getUserPageList();
			}
		});	
	});
	//编辑用户事件
	var editEvent = function(id){
		layer.open({
			type:2,
			title:'编辑用户',
			fix:false,
			maxmin:true,
			shadeClose:true,
			area:['1100px','600px'],
			content:'/user/get?id='+id,
			end:function(){
				getUserPageList();
			}
		})
	}
	//删除用户事件
	var delEvent = function(id){
		//询问框
		layer.confirm('您确定要删除吗?',{
			btn:['是','否']
		//按钮
		},function(){
			//是
			$.ajax({
				type:"GET",
				dataType:"json",
				url:"/user/del",
				data:{
					id:id
				},
				success:function(){
					getUserPageList();
					layer.msg('已经成功删除该用户'+id,{icon:5});
				}
			});
		},function(){
			//否
		}
		)
	}
	</script>

</body>
</html>